<template>
  <div class="cateRight">
    <!--搜索栏-->
    <div class="searchbox">
      <ul class="order_ul">
        <li><a style="border: none" href="javascript:void(0);">排序：</a></li>
        <li>
          <a class="col7ac main" href=""> 默认 </a>
        </li>
        <li>
          <a class="col7ac" href="javascript" style="cursor: pointer">新品</a>
        </li>

        <li>
          <a class="col7ac" href="javascript"> 销量 </a>
        </li>
        <li>
          <a class="col7ac" href="javascript"> 价格 </a>
        </li>
        <li>
          <a class="col7ac" href="javascript"> 评论 </a>
        </li>
      </ul>
      <!-- Page -->
      <div class="pagenavi">
        <div class="all-number">
          <span>共45个商品</span>
        </div>
        <p class="pageArea" data-countpage="1">
          <span class="colf22e01 fontT">1</span>
          /
          <span class="page_count fontT">1</span>
        </p>
      </div>
      <!-- Page End-->
    </div>
    <!--搜索栏结束-->

    <!--商品-->
    <div class="goods">
        <ul>
            <li>
                <div class="listbox clearfix"> 
                <!-- 圖片 -->
                <div class="listPic"><a rel="nofollow" target="_blank" href="/Home/Goods/goods/id/57609.html">
                <img src="/Public/upload/goods/thumb/57609/goods_thumb_57609_180_180.jpg" class="fn_img_lazy"></a></div>
                <!-- 品名 -->
                <div class="listDescript"><a target="_blank" href="/Home/Goods/goods/id/57609.html" class="text13">得力 (deli) 20张A4透明文件套单片文件夹 5705</a> </div>
                <div class="cat-shopprice f_l">
                    <p>¥21.00</p>
                    <a href="/Home/Goods/goods/id/57609.html">查看详情</a>
                </div>
                <div class="clear"></div>
                </div>
            </li>
        </ul>
    </div>



        <div class="page">
            <div class="info">
             <el-pagination
                layout="prev, pager, next"
                :total="50">
            </el-pagination>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  name: "cateRight",
};
</script>

<style lang="scss" scoped>
.cateRight {
  width: 100%;
}
.searchbox {
  width: 100%;
  display: flex;
  height: 54px;
  border: 1px solid #dbdbdb;
}
.order_ul {
  width: 85%;
  display: flex;
  li{
      width: 12%;
      a{
          color: #333;
      }
  }
}
.searchbox .order_ul li a {
    margin: 10px 5px 0;
    padding: 7px 7px;
    border: 1px solid #ddd;
    text-align: center;
    display: block;
}
.pagenavi{
    width: 15%;
    display: flex;
    text-align: right;
    line-height: 54px;
    padding-left:5% ;
}
.searchbox .order_ul .main {
    background: #4352BF;
    font-weight: 100;
    color: #fff !important;
}
.goods{
    width: 100%;
    border: 1px solid #ddd;
    margin-top: 20px;
}
.goods ul{
    display: flex;
    li{
        width: 240px;
        border: 1px solid #ddd;
    }
}
.goods.listDescript {
    color: #3c3c3c;
    margin: 0px 25px 3px;
    overflow: hidden;
    height: 36px;
    line-height: 1.5;
}
.goods .cat-shopprice {
    width: 100%;
    font-size: 15px;
    color: #dc3018;
    margin-bottom: 8px;
    margin-top: 4px;
}
.goods .cat-shopprice p {
    font-size: 16px;
    line-height: 23px;
    font-weight: bold;
    text-align: left;
    float: left;
    text-indent: 25px;
}
.goods .cat-shopprice a {
    float: right;
    padding: 3px 5px;
    background: #4352BF;
    color: #fff;
    margin-right: 20px;
    font-size: 13px;
}
.page{
    width: 100%;
    margin-top: 20px;
}
</style>